<template>
  <main class="px-[26px] mt-[24px]">
    <exam-title>
      <p class="flex items-center justify-between w-full">
        考试排名
        <span class="inline-flex items-center text-[10px]" @click="toResultList">
          <span> 更多 </span>
          <var-icon name="chevron-right" color="#8D8D8D" />
        </span>
      </p>
    </exam-title>

    <ul class="mt-[25px] flex justify-center gap-[10px] items-end">
      <li
        class="bg-white w-[86px] h-[89px] flex flex-col items-center justify-center gap-[7.5px] enter-y var-elevation--3"
      >
        <template v-if="resultList.length < 2">
          <LIstBlock>
            <template #header>
              <img
                src="../../../assets/icon/exam_list_two.png"
                class="absolute w-[20px] left-[5px] -top-[16px]"
              />
            </template>
          </LIstBlock>
        </template>
        <template v-else>
          <LIstBlock>
            <template #header>
              <img
                src="../../../assets/icon/exam_list_two.png"
                class="absolute w-[20px] left-[5px] -top-[16px]"
              />
            </template>
            <template #name>
              {{ resultList[1].student_name }}
            </template>
          </LIstBlock>
        </template>
      </li>
      <li
        class="bg-white w-[86px] h-[104.5px] flex flex-col items-center justify-center gap-[7.5px] enter-y var-elevation--3"
      >
        <template v-if="resultList.length < 1">
          <LIstBlock>
            <template #header>
              <img
                src="../../../assets/icon/exam_list_one.png"
                class="absolute w-[22px] left-[5px] -top-[16px]"
              />
            </template>
          </LIstBlock>
        </template>
        <template v-else>
          <div
            class="w-[37px] rounded-full border-[2.5px] border-solid border-[#FED530] relative mt-[4px]"
          >
            <img src="../../../assets/images/user_head.png" />
            <img
              src="../../../assets/icon/exam_list_one.png"
              class="absolute w-[22px] left-[5px] -top-[16px]"
            />
          </div>
          <p class="text-[12px] text-[#545454]"> {{ resultList[0].student_name }} </p>
        </template>
      </li>
      <li
        class="bg-white w-[86px] h-[89px] flex flex-col items-center justify-center gap-[7.5px] enter-y var-elevation--3"
      >
        <template v-if="resultList.length > 2">
          <div
            class="w-[35px] rounded-full border-[2.5px] border-solid border-[#CA9561] relative mt-[14px]"
          >
            <img src="../../../assets/images/user_head.png" />
            <img
              src="../../../assets/icon/exam_list_three.png"
              class="absolute w-[20px] left-[5px] -top-[16px]"
            />
          </div>
          <p class="text-[11px] text-[#545454]"> {{ resultList[2].student_name }} </p>
        </template>
        <template v-else>
          <div
            class="w-[35px] rounded-full border-[2.5px] border-solid border-[#CA9561] relative mt-[14px]"
          >
            <img src="../../../assets/images/user_head.png" />
            <img
              src="../../../assets/icon/exam_list_three.png"
              class="absolute w-[20px] left-[5px] -top-[16px]"
            />
          </div>
          <p class="text-[11px] text-[#545454]"> 暂无 </p>
        </template>
      </li>
    </ul>
  </main>
</template>

<script setup lang="ts">
  import { getExamResultList } from '@/api/user';
  import { claculate } from '@/hook/student';
  import { useUserInfoStoreWithOut } from '@/stores/modules/userInfo';
  import ExamTitle from './ExamTitle.vue';
  import LIstBlock from './LIstBlock.vue';
  interface ExamResult {
    student_name: string;
    averageScore: number;
  }
  let resultList = ref<ExamResult[]>([]);
  const getCurrentResultList = async () => {
    const { getClassName } = storeToRefs(useUserInfoStoreWithOut());
    const { data } = await getExamResultList(getClassName.value);
    const studentList = new Set();
    for (const i of data) {
      studentList.add(i.student_id);
    }
    const r = [];
    studentList.forEach((id) => {
      const obj = claculate(data, id);
      console.log(obj);
      r.push(obj);
    });
    resultList.value = r.sort((a: ExamResult, b: ExamResult) => a.averageScore + b.averageScore);
    console.log(resultList);
  };
  getCurrentResultList();
  const router = useRouter();
  const toResultList = () => {
    router.push({ name: 'examresult' });
  };
</script>
